<template>
    <div class="singer" ref="singer">
      <list-view :data="singers" @select="selectSinger" ref="list"></list-view>
      <router-view></router-view><!--用来挂载子路由的 router-view-->
    </div>
</template>

<script>
  import {getSingerList} from "api/singer";
  import {ERR_OK} from "api/config";
  import Singer from 'common/js/singer'; // 封装类来继续avatar
  import ListView from 'base/listview/listview'; // 引入滚动组件
  import {mapMutations} from 'vuex';// 引入vuex的语法糖

  import {playlistMixin} from "common/js/mixin"; // 引入mixins vue官网有介绍

  //定义常量
  const HOT_NAME = '热门';
  const HOT_SINGER_LEN = 10;
  export default {
  name: 'singer',
  mixins: [playlistMixin],
  data () {
    return {
      singers: []
    }
  },

  created () {
    this._getSingerList()
  },
  components: {
    ListView
  },
  methods: {
    // 使用vuex的mapMutations做对象的映射 触发方法设置state中的singer
    ...mapMutations({
      setSinger:'SET_SINGER'
    }),
    // vue中 mixins的使用
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px': '';
      this.$refs.singer.style.bottom = bottom;
      this.$refs.list.refresh();
    },
    _getSingerList () {
      getSingerList().then((res) => {
        // console.log(res)
        if (res.code === ERR_OK) {
          // console.log(res);
          this.singers = this._normallizeSinger(res.data.list)
          // this._normallizeSinger(this.singer)
          // console.log(this._normallizeSinger(this.singer))
        }
      })
    },
    // 对接口获取的数据进行处理，按照字母排序相同的聚合在一起。
    _normallizeSinger (list) {
      // 热门歌手数据(截取返回的数据前十条为热门数据)
      // 按字母聚合的数据的歌手数据

      let map = {
        hot: {
          title: HOT_NAME,
          items: []
        }
      };
      list.forEach((item,index) => {
          if (index < HOT_SINGER_LEN) {
            map.hot.items.push(new Singer({
              id: item.Fsinger_mid,
              name: item.Fsinger_name,
            }))
          }
          const key = item.Findex;
          if (!map[key]) {
            map[key] = {
              title: key,
              items: []
            }
          }
          map[key].items.push(new Singer({
            id: item.Fsinger_mid,
            name: item.Fsinger_name
          }))
      });
      // 为了得到有序列表，我们需要处理 map
      let hot = [];
      let ret = [];
      for(let key in map) {
        let val = map[key]
        if (val.title.match(/[a-zA-Z]/)) {
          ret.push(val)
        } else if (val.title === HOT_NAME) {
          hot.push(val)
        }
      }
      ret.sort((a,b) => {
        return a.title.charCodeAt(0) - b.title.charCodeAt(0)
      });
      return hot.concat(ret)
    },
    // 从子组件 list-view中接收过来的数据
    selectSinger (singer) {
      // console.log("singer",singer);
      // 根据传递过来数据中的 id 让路由跳转到相应的歌手页面
      this.$router.push({
        path:`/singer/${singer.id}`
      });
      this.setSinger(singer) // 调用mutations中的[types.SET_SINGER]事件来触发设置state中的singer
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.singer
  position: fixed
  top: 88px
  bottom: 0
  width: 100%
</style>
